<template>
	<view class="my-gift-detail">
		<view class="goods-main-img">
			<view class="main-img-wp flex_center">
				<image mode="widthFix" class="main-img" :src="orderInfo.pic">
				</image>
			</view>
			<view class="goods-info">
				<view class="title">
					{{orderInfo.prodName?orderInfo.prodName:''}}
				</view>
				<view class="price-wp">
					X{{orderInfo.num?orderInfo.num:1}} ({{orderInfo.units?orderInfo.units:''}})
				</view>
			</view>
		</view>
		<view class="receiving-information">
			<view class="item flex_between_center">
				<view class="title1">
					赠予人
				</view>
				<view class="title2">
					{{orderInfo.shopUser?orderInfo.shopUser:''}}
				</view>
			</view>
			<view class="item flex_between_center" @click="callMe(orderInfo.shopMobile)">
				<view class="title1">
					联系电话
				</view>
				<view class="title2">
					{{orderInfo.shopMobile?orderInfo.shopMobile:''}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				orderInfo: {},


			};
		},
		onLoad(opt) {
			if (opt.id) {
				this.getGoodsInfo(opt.id)
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			callMe(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					})
				} else {
					uni.showToast({
						title: '未留联系方式',
						icon: 'none'
					})
				}

			},
			async getGoodsInfo(id) {
				let res = await this.$api.getOrderDetail({
					id
				})
				if (res.success) {
					console.log(res.result);
					this.orderInfo = res.result

				} else {
					this.orderInfo = {}
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
			},


		}
	}
</script>
<style lang="scss" scoped>
	.my-gift-detail {
		padding-bottom: 120rpx;

		.goods-main-img {
			.main-img {
				margin-top: 40rpx;
				width: 650rpx;
				box-shadow: 4rpx 4rpx 10rpx #f7f8fa;
			}

			.goods-info {
				margin-top: 10rpx;
				padding: 32rpx;

				.title {
					text-align: center;
					height: 44rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #1D2129;
					line-height: 45rpx;

				}

				.price-wp {
					text-align: center;
					margin-top: 10rpx;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 600;
					color: #FF7D00;
					line-height: 50rpx;

				}
			}

			.padding-bar {
				height: 40rpx;
				background-color: #f7f8fa;
			}

		}

		.receiving-information {
			margin: 0 24rpx;

			.item {
				height: 100rpx;


				.title1 {
					width: 160rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #4E5969;
					line-height: 39rpx;
				}

				.title2 {
					text-align: right;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 39rpx;

				}
			}
		}
	}
</style>